<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,html{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body style="width: 100vw;height: 100vh">
<div id="chart_bar" style="height: 100%;width: 50%;position: relative;float: left"></div>
<div id="chart_pie" style="height: 100%;width: 50%;position: relative;float: left"></div>
<script src="lib/echarts.common.min.js"></script>
<script>
var pData;
var chart1;
var chart2;
    function loadData(data) {
        pData=data;
        chart1 = echarts.init(document.getElementById('chart_bar'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '柱状图'
            },
            tooltip: {
                show: true,
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: data.map(function (x) {
                    if(!x.name){
                        return "未记录"

                    }else {
                        return x.name
                    }
                })
            },
            yAxis: {name:"平方米"},
            series: [{
                name: '面积',
                type: 'bar',
                data: data.map(function (x) {
                    return x.value
                })
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        chart1.setOption(option);

        var option2 = {
            backgroundColor: '#2c343c',

            title: {
                text: "饼图",
                left: 'center',
                top: 20,
                textStyle: {
                    color: '#ccc'
                }
            },

            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },

            visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series : [
                {
                    name:'面积统计',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '50%'],
                    data:data,
                    roseType: 'radius',
                    label: {
                        normal: {
                            textStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },

                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        };
        chart2 = echarts.init(document.getElementById('chart_pie'));
        chart2.setOption(option2);
    }
    function update(){
        chart1.resize();
        chart2.resize();
    }
</script>
</body>
</html>